Angular Material এর Material Form Field একটি অত্যন্ত গুরুত্বপূর্ণ UI উপাদান যা ফর্ম ইনপুট ফিল্ডগুলোকে সুন্দর, ব্যবহারযোগ্য এবং সহজবোধ্য করে তোলে। এটি ইনপুট ফিল্ডের চারপাশে একটি স্টাইলযুক্ত কনটেইনার প্রদান করে, যা টেক্সট ফিল্ড, সিলেক্ট বক্স, রেডিও বাটন ইত্যাদি ফর্ম কন্ট্রোলকে সঠিকভাবে উপস্থাপন করে। এর সাথে ইনপুট ভ্যালিডেশন, লেবেল এবং প্লেসহোল্ডার প্রপার্টি গুলি যুক্ত করা হয় যা ব্যবহারকারীদের জন্য আরও সহজ এবং আকর্ষণীয় করে তোলে।
Material Form Field ইনপুট ফিল্ডের চারপাশে একটি সুন্দর কনটেইনার প্রদান করে, যা ইনপুট ফিল্ডের সঠিক প্রদর্শন এবং প্রয়োজনীয় লেবেল, প্লেসহোল্ডার, এবং ইনফরমেটিভ টেক্সট সাপোর্ট করে। এর কিছু মূল বৈশিষ্ট্য হলো:
এখানে Material Form Field ব্যবহারের একটি সহজ উদাহরণ দেখানো হলো:
<mat-form-field appearance="fill">
<mat-label>Username</mat-label>
<input matInput placeholder="Enter your username" [(ngModel)]="username">
<mat-hint>Username should be unique</mat-hint>
<mat-error *ngIf="username.hasError('required')">Username is required</mat-error>
</mat-form-field>
<mat-form-field>: এটি মূল কনটেইনার যা ফর্ম ইনপুট ফিল্ডের চারপাশে থাকে।appearance="fill": এটি ইনপুট ফিল্ডের জন্য একটি নির্দিষ্ট স্টাইল প্রদান করে, যেমন 'outline', 'fill', বা 'standard' স্টাইল।<mat-label>: এটি ইনপুট ফিল্ডের লেবেল।matInput: এটি ইনপুট ফিল্ডে ম্যাটেরিয়াল ডিজাইনের স্টাইলিং প্রয়োগ করে।placeholder: ইনপুট ফিল্ডের প্লেসহোল্ডার টেক্সট।<mat-hint>: এটি ইনপুট ফিল্ডের নিচে নির্দেশিকা টেক্সট প্রদান করে।<mat-error>: এটি ইনপুট ফিল্ডের ত্রুটি বার্তা প্রদর্শন করে যখন ইনপুট ফিল্ডটি ভুল হয়।Angular Material Form Field এর জন্য কিছু ভিন্ন appearance অপশন রয়েছে যা ইনপুট ফিল্ডের স্টাইল নির্ধারণ করে।
appearance="fill": এই অপশনটি ইনপুট ফিল্ডকে পূর্ণ রঙের ব্যাকগ্রাউন্ড প্রদান করে।appearance="outline": এটি ইনপুট ফিল্ডের চারপাশে একটি আউটলাইন প্রদর্শন করে।appearance="standard": এটি ডিফল্ট স্টাইল, যেখানে কোনো বিশেষ বর্ডার বা ব্যাকগ্রাউন্ড নেই।<mat-form-field appearance="outline">
<mat-label>Username</mat-label>
<input matInput placeholder="Enter your username" [(ngModel)]="username">
</mat-form-field>
Material Form Field ইনপুট ফিল্ডের জন্য ইনপুট ভ্যালিডেশন সমর্থন করে। <mat-error> ব্যবহার করে আপনি ত্রুটি বার্তা প্রদর্শন করতে পারেন, যখন ইনপুট ফিল্ডে ভুল ইনপুট দেওয়া হয়।
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input matInput [formControl]="email" placeholder="Enter your email">
<mat-error *ngIf="email.invalid && email.touched">Please enter a valid email</mat-error>
</mat-form-field>
[formControl]: এটি ব্যবহার করা হয় ফর্ম কন্ট্রোলের সাথে ইনপুট ফিল্ডকে যুক্ত করার জন্য।*ngIf="email.invalid && email.touched": এটি শুধুমাত্র ত্রুটি বার্তা দেখাবে যদি ইনপুট ফিল্ডটি ত্রুটিপূর্ণ এবং ব্যবহারকারী এটি স্পর্শ করেছে।এছাড়াও, Material Form Field এর মধ্যে Select বক্স ব্যবহার করা যেতে পারে। এটি একটি ড্রপডাউন মেনু তৈরি করে, যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে।
<mat-form-field appearance="fill">
<mat-label>Country</mat-label>
<mat-select [(value)]="selectedCountry">
<mat-option value="usa">USA</mat-option>
<mat-option value="canada">Canada</mat-option>
<mat-option value="uk">UK</mat-option>
</mat-select>
</mat-form-field>
<mat-select>: এটি একটি ড্রপডাউন মেনু তৈরি করে।<mat-option>: এটি প্রতিটি অপশন প্রদর্শন করে যা ড্রপডাউন মেনুতে থাকবে।Material Form Field Angular Material এর একটি গুরুত্বপূর্ণ উপাদান যা ফর্ম ইনপুট ফিল্ডগুলোর জন্য সুন্দর, ব্যবহারকারী-বান্ধব এবং স্টাইলযুক্ত কনটেইনার তৈরি করে। এটি লেবেল, প্লেসহোল্ডার, নির্দেশিকা, ত্রুটি বার্তা এবং বিভিন্ন ধরনের কাস্টমাইজেশন সাপোর্ট করে। Angular Material ফর্মের উন্নতমানের ডিজাইন এবং ইনপুট ভ্যালিডেশন ফিচারের জন্য এটি একটি অত্যন্ত কার্যকর টুল।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
